import { Alert, Modal, Pressable, StyleSheet, Text, View } from "react-native";
import React, { forwardRef, useImperativeHandle, useState } from "react";
import ModalController, { CustomModalRef } from "./ModalController";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { ParamList } from "../types/NavigationTypes";

const SignupModal = forwardRef((props, ref) => {
  const navigation =
    useNavigation<NativeStackNavigationProp<ParamList, "Web">>();

  const [modalVisible, setModalVisible] = useState(false);

  useImperativeHandle(
    ref,
    () => ({
      show: (data?: any) => {
        setModalVisible(true);
      },
      hide: () => {
        setModalVisible(false);
      },
    }),
    []
  );

  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert("Modal has been closed.");
        ModalController.hideModal();
      }}
    >
      <View style={styles.centeredView}>
        <View style={styles.modalView}>
          <Text style={styles.modalText}>Sign up!</Text>

          <Pressable
            style={[styles.button, styles.buttonClose]}
            onPress={() => {
              navigation.navigate("Web", {
                title: "隐私政策",
                url: "https://m.imusic.cn/h5/privacy_policy_page",
              });
            }}
          >
            <Text style={styles.textStyle}>Hide Modal</Text>
          </Pressable>
        </View>
      </View>
    </Modal>
  );
});

export default SignupModal;

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.5)",
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center",
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center",
  },
});
